<template>
    <div class="recommend">
        <p>流行旅游</p>
        <ul>
            <router-link
                    tag="li"
                    :to="'/detail/'+item.productId"
                    v-for="(item,key) in recommendList"
                    :key="key"
            >
                <img :src="item.image" alt="">
                <div>
                    <h4>{{item.name}}</h4>
                    <p>{{item.scenicAddress}}</p>
                    <p>{{item.countDesc}} | {{item.satisfactionDesc}}</p>
                </div>
            </router-link>
        </ul>
        <div>
            <router-link to="/">查看更多</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "recommend",
        props:{
            recommendList:{type:Array}
        }
    }
</script>

<style lang="scss" scoped>
    @import "~css/main.scss";
    @import "~css/varibles.scss";
    .recommend{
        >p:first-child{
            padding:.24rem 0 .24rem .2rem;
            background-color: $bgcolor-p;
        }
        >ul{
            margin: 0 .2rem;
            >li{
                border-bottom: #eaeaea 1px solid;
                display:flex;
                box-sizing: border-box;
                img{

                    display: inline-block;
                    width:30%;
                    height:100%;
                    margin: .16rem;
                }
                div{
                    width:70%;
                    min-width: 0;
                    >h4{
                        font-weight: bold;
                        font-size: .28rem;
                        margin-top: .24rem;
                    }
                    p{
                        @include ellipsis();
                        padding-top: .22rem;
                        font-size: .22rem;
                    }
                    p:last-child{
                        color:#f66;
                    }
                }
            }
        }
        >div{
            padding: .2rem;
            text-align: center;
        }
    }
</style>
